<template>
  <div style="margin-top: 20px">

    <el-form :inline="true" class="demo-form-inline" label-width="120px">
      <el-form-item label="选择设备：">
        <el-radio-group v-model="form['device_id']" size="medium" @change="selectChange">
          <el-radio v-for="(d,k) in datas" :key="k" :label="d.id">{{ d.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="multipleSelection" :height="450" style="width: 100%" border>
      <el-table-column prop="id" label="设备编号" min-width="100" sortable="custom" />
      <el-table-column prop="alias" label="设备名称" min-width="120" sortable="custom" show-overflow-tooltip />
      <!-- <el-table-column prop="auth_time" label="授权时长" min-width="105" sortable="custom" /> -->
    </el-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      top="1vh"
      width="50%"
      :before-close="cancel"
      :append-to-body="true"
      :close-on-click-modal="false"
    >

      <el-table v-loading="loading" :data="tableValue" :height="450" style="width: 100%" border @select="handleSelectionChange" @selection-change="handleSelectionChangeAll">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="设备编号" min-width="100" sortable="custom" />
        <el-table-column prop="alias" label="设备名称" min-width="120" sortable="custom" show-overflow-tooltip />
        <!-- <el-table-column prop="auth_time" label="授权时长" min-width="105" sortable="custom" /> -->
      </el-table>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="22">
          <el-button class="filter-item" type="primary" @click="save()">保存</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import {
  list
} from '@/api/admin/device-group'
import {
  list as deviceList
} from '@/api/admin/device'

export default {
  name: 'Devselect',
  props: {
    selected: {
      type: Array,
      default: () => ([{
        a: 1
      },
      {
        b: 2
      }
      ])
    }
  },

  data() {
    return {
      show: true,

      dialogTitle: '选择设备',
      dialog: false,

      loading: false,
      datas2: [],
      query2: {
        page: 1,
        limit: 15,
        ids: []
      },
      count: 0,
      ids: [],

      query: {
        'page': 0,
        'ids': []
      },
      datas: [],
      form: {
        device: [],
        'device_id': 0
      },

      options: [],
      value: [],
      tableValue: [],
      select: [],

      multipleSelection: []
    }
  },
  created() {
    this.list()
  },
  methods: {
    selectChange(d) {
      console.log('selectchange:', d)
      this.dialog = true

      this.query['group_id'] = d
      this.tableValue = []
      deviceList(this.query).then(res => {
        this.options = res.data.list
        this.value = []
        this.options.forEach((d) => {
          this.value.push(d.id)
          this.tableValue.push({
            id: d.id,
            alias: d.alias
          })
        })
        console.log('分组数据:', this.value)
      }).catch(() => {

      })
    },

    notGroupDev() {
      this.loading = true
      this.query2['group_id'] = this.ids
      // console.log(this.ids);

      deviceList(this.query2).then(res => {
        this.datas2 = res.data.list
        this.count = res.data.count
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    list() {
      list().then(res => {
        console.log(this.datas)
        this.datas = res.data.list
      }).catch(() => {

      })
    },

    cancel() {
      this.dialog = false
    },

    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    handleSelectionChangeAll(val) {
      if (val.length > 0) {
        this.multipleSelection = val
      }
    },

    save() {
      this.multipleSelection.forEach((v) => {
        console.log('选中机器:', v)
        this.select.push(v.id)
        this.options.push(v)
      })
      console.log(this.select)
      this.$emit('devselectEvent', this.select)
      this.tableValue = []
      this.dialog = false
    }

  }
}
</script>

<style>
</style>
<strong></strong>
